<template>
  <div class="container">
    <navigate>编辑基础资料</navigate>
    <div class="title flex_row flex_align_center">
      <div class="bar"></div>
      <div class="text">用户姓名</div>
    </div>
    <template v-for="(item, i) in list">
      <van-cell-group
        v-if="item.type == 2"
        class="nowrap input_outer father_relative"
        :key="i + '_'"
      >
        <van-field
          readonly
          clickable
          v-model="item.val.label"
          :label="item.label"
          placeholder="请选择"
          @click="item.visible = true"
        />
        <v-picker
          :columns="item.option"
          valueKey="label"
          @confirm="
            item.val = $event;
            item.visible = false;
          "
          :isVisible="item.visible"
          @cancel="item.visible = false"
        />
        <img
          src="@/assets/images/common/right.png"
          class="right vertical_center"
          alt=""
        />
      </van-cell-group>

      <van-cell-group
        :key="i + '-++'"
        class="input_outer"
        v-else-if="item.type == 1"
      >
        <van-field
          v-model="item.val"
          :label="item.label"
          placeholder="请输入"
        />
      </van-cell-group>

      <van-cell-group
        :key="'-' + i + '___'"
        class="input_outer father_relative"
        v-else
      >
        <van-field
          @click="item.visible = true"
          v-model="item.val"
          :label="item.label"
          placeholder="请选择"
        />

        <van-popup v-model="item.visible" round position="bottom">
          <van-datetime-picker
            class="date_time_picker"
            v-model="currentDate"
            type="year-month"
            title="选择年月"
            :min-date="minDate"
            @cancel="item.visible = false"
            @confirm="
              item.val = formatDate($event, 'yyyy年MM月');
              item.visible = false;
            "
            :max-date="maxDate"
            :formatter="formatter"
          />
        </van-popup>
        <img
          src="@/assets/images/common/right.png"
          class="right vertical_center"
          alt=""
        />
      </van-cell-group>
    </template>

    <div class="title flex_row flex_align_center">
      <div class="bar"></div>
      <div class="text">基本信息</div>
    </div>

    <template v-for="(item, i) in list2">
      <van-cell-group
        v-if="item.type == 2"
        class="nowrap input_outer father_relative"
        :key="i + '_'"
      >
        <van-field
          readonly
          clickable
          v-model="item.val.label"
          :label="item.label"
          placeholder="请选择"
          @click="item.visible = true"
        />
        <v-picker
          :columns="item.option"
          valueKey="label"
          @confirm="
            item.val = $event;
            item.visible = false;
          "
          :isVisible="item.visible"
          @cancel="item.visible = false"
        />
        <img
          src="@/assets/images/common/right.png"
          class="right vertical_center"
          alt=""
        />
      </van-cell-group>

      <van-cell-group
        :key="i + '-++'"
        class="input_outer"
        v-else-if="item.type == 1"
      >
        <van-field
          v-model="item.val"
          :label="item.label"
          placeholder="请输入"
        />
      </van-cell-group>

      <van-cell-group
        :key="'-' + i + '___'"
        class="input_outer father_relative"
        v-else
      >
        <van-field
          @click="item.visible = true"
          v-model="item.val"
          :label="item.label"
          placeholder="请选择"
        />

        <van-popup v-model="item.visible" round position="bottom">
          <van-datetime-picker
            class="date_time_picker"
            v-model="item.val"
            type="date"
            title="选择年月"
            :min-date="minDate"
            :max-date="maxDate"
            @cancel="item.visible = false"
            @confirm="
              item.val = formatDate($event.getTime(), 'yyyy-MM-dd');
              item.visible = false;
            "
          />
        </van-popup>
        <img
          src="@/assets/images/common/right.png"
          class="right vertical_center"
          alt=""
        />
      </van-cell-group>
    </template>
    <button class="btn" @click="editBaseData">保存资料</button>
  </div>
</template>

<script>
import {
  schoolStateOptions,
  politicsOptions,
  marriageOptions,
  nationOptions,
  sex,
} from "@/utils/options.js";
import { editBasis, getBasis } from "@/api/funcation/selfAssessment";
import { formatDate } from "@/utils/time";
import { mapState, mapMutations } from "vuex";
// 政治面貌
let politics = politicsOptions.map((item) => {
  return {
    id: item.id,
    label: item.title,
  };
});
// 婚姻
let marriage = marriageOptions.map((item) => {
  return {
    id: item.id,
    label: item.title,
  };
});
// 民族
let nation = nationOptions.map((item) => {
  return {
    id: item.id,
    label: item.text,
  };
});
export default {
  data() {
    return {
      minDate: new Date(1950, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(2021, 0, 17),
      list2: [
        {
          label: "学籍状态:",
          option: [...schoolStateOptions],
          type: 2,
          val: "",
          visible: false,
        },
        {
          label: "身份证号:",
          type: 1,
          val: "",
          visible: false,
        },
        {
          label: "出生日期:",
          type: 3,
          val: "",
          visible: false,
        },
        {
          label: "联系方式:",
          type: 1,
          val: "",
          visible: false,
        },
        {
          label: "政治面貌:",
          type: 2,
          option: [...politics],
          val: "",
          visible: false,
        },
        {
          label: "婚姻状况:",
          type: 2,
          option: [...marriage],
          val: "",
          visible: false,
        },
        {
          label: "籍贯:",
          type: 1,
          val: "",
          visible: false,
        },
        {
          label: "民族:",
          type: 2,
          option: [...nation],
          val: "",
          visible: false,
        },
        {
          label: "职业:",
          type: 1,
          val: "",
          visible: false,
        },
        {
          label: "现住址:",
          type: 1,
          val: "",
          visible: false,
        },
      ],
      list: [
        {
          label: "用戶姓名:",
          type: 1,
          val: "",
          visible: false,
        },
        {
          label: "性別:",
          option: [...sex],
          type: 2,
          val: "",
          visible: false,
        },
        {
          label: "年齡:",
          type: 1,
          val: "",
          visible: false,
        },
      ],
    };
  },
  computed: {
    ...mapState(["INFO"]),

    sex() {
      return sex;
    },
    schoolStateOptions() {
      return schoolStateOptions;
    },
  },
  methods: {
    formatDate,
    ...mapMutations(["SET_INFO"]),
    async editBaseData() {
      const params = {
        id: this.INFO.id,
        name: this.list[0].val,
        sex: this.list[1].val.id,
        age: this.list[2].val,

        student_status: this.list2[0].val.id,
        id_card: this.list2[1].val,
        birthday: (new Date(this.list2[2].val).getTime() / 1000).toString(),
        phone: this.list2[3].val,
        political_outlook: this.list2[4].val.id,
        marital_status: this.list2[5].val.id,
        native_place: this.list2[6].val,
        nation: this.list2[7].val.id,
        career: this.list2[8].val,
        address: this.list2[9].val,
      };
      for (let key in params) {
        if (!params[key]) {
          delete params[key];
        }
      }
      const res = await editBasis(params);
      if (res.code == 200) {
        this.$toast.success("修改成功！");
        this.SET_INFO({ ...this.INFO, nickname: this.list[0].val });
      }
    },
    async getRecordData() {
      const data = await getBasis({ id: this.INFO.id });
      if (data.code == 200) {
        this.list[0].val = data.data.name;
        this.list[1].val = {
          id: data.data.sex,
          label: sex.find((item) => item.id == data.data.sex).label,
        };
        this.list[2].val = data.data.age;
        this.list2[0].val = {
          id: data.data.student_status,
          label: schoolStateOptions.find(
            (item) => item.id == data.data.student_status
          ).label,
        };
        this.list2[1].val = data.data.id_card;
        this.list2[2].val = data.data.birthday
          ? formatDate(Number(data.data.birthday) * 1000, "yyyy-MM-dd")
          : "";
        this.list2[3].val = data.data.phone;

        this.list2[4].val = {
          id: data.data.political_outlook,
          label: politics.find((item) => item.id == data.data.political_outlook)
            .label,
        };
        this.list2[5].val = {
          label: marriage.find((item) => item.id == data.data.marital_status)
            .label,
          id: data.data.marital_status,
        };

        this.list2[6].val = data.data.native_place;
        this.list2[7].val = {
          label: nation.find((item) => item.id == data.data.nation).label,
          val: data.data.nation,
        };
        this.list2[8].val = data.data.career;
        this.list2[9].val = data.data.address;
      }
    },
  },
  created() {
    this.getRecordData();
  },
};
</script>
<style lang="less" scoped>
@import "./css/index.less";
</style>
